import { Button, Result } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { pinYinBaseUrl, animations, okSounds } from '@/utils/config'
import { disruptOrder, rdm } from '@/utils/tool'
import audio_next from '/audio/next.mp3'
import 错误声音 from '/audio/error.wav'
import './style/examination.scss'

const pathBase = location.host === 'www.e-art.top' ? '/projects/dian-ti-shi-zi/' : ''
export default ({ words, playerRef, setCurrPinyin, paramName, read }) => {
    const [选项, set选项] = useState([])
    const [答案, set答案] = useState('')
    const [选中项, set选中的答案] = useState('')
    const [放礼花, set放礼花] = useState(false)
    const correctAudioRef = useRef()
    const errAudioRef = useRef()

    const shuffle = () => {
        const _words = disruptOrder(words)
        const _选项 = _words.slice(0, 4)
        set选项(_选项)
        set答案(rdm(_选项))
        set选中的答案('')
    }
    const 下一题声音 = 放礼花
        ? pathBase + '/audio/烟花声.mp3'
        : Math.random() < .3
            ? pathBase + '/audio/' + rdm(okSounds)
            : audio_next
    const speak = () => {
        if (paramName === 'pinYin') {
            const pinyin = 答案.replace('ü', 'v')
            setCurrPinyin(`${pinYinBaseUrl + pinyin}.mp3?key=` + Math.random())
            playerRef.current.addEventListener("canplaythrough", (event) => {
                /* 音频可以播放；如果权限允许则播放 */
                playerRef.current.play()
            })
        } else {
            read(答案)
        }
    }
    const select = (word) => {
        set选中的答案(word)
    }
    const 选择状态 = !选中项 ? '待选' : 选中项 === 答案 ? '选对' : '选错'
    const getCorrectAnimation = () => {
        return Math.random() < .5 ? rdm(animations) : ''
    }
    useEffect(() => {
        if (选择状态 === '待选') {
            return
        } else if (选择状态 === '选错') {
            errAudioRef.current.play()
        } else {
            correctAudioRef.current.play()
            Math.random() < .06 && set放礼花(true)
        }
        setTimeout(() => {
            shuffle()
        }, 选择状态 === '选错' ? 2000 : 2000)
    }, [选择状态])

    useEffect(() => {
        放礼花 && correctAudioRef.current.play()
        setTimeout(() => {
            set放礼花(false)
        }, 8000);
    }, [放礼花])
    useEffect(() => {
        shuffle()
    }, [])

    console.log('~~选项,答案,选择状态', 选项, 答案, 选择状态)

    return <div className='m-examination'>
        <div className='speaker' onClick={speak} />
        {选择状态 === '待选'
            ? <Result
                status="info"
                title="请选择听到的字母"
                subTitle='竖起我的小耳朵~~'
            />
            : 选择状态 === '选对'
                ? <Result
                    status="success"
                    title="答对了"
                    subTitle='继续加油~~'
                />
                : <Result
                    status="error"
                    title="答错了"
                    subTitle={<>正确答案是: <strong style={{ fontSize: '1.5rem', lineHeight: '1.3125rem' }}>{答案}</strong></>}
                />
        }
        <div className={'words ' + (选择状态 !== '待选' ? 'disable' : '')}>
            <ul>{选项.map(word =>
                <Button
                    size='large'
                    contentFontSize='20px'
                    onClick={() => select(word)}
                    type={选中项 === word ? 'primary' : 'default'}
                    danger={选中项 === word && 选择状态 == '选错'}
                    className={选中项 === word && 选择状态 == '选对' && ('animated ' + getCorrectAnimation())}
                >
                    {word}
                </Button>
            )}</ul>
        </div>
        <audio ref={correctAudioRef} hidden="" src={下一题声音}></audio>
        <audio ref={errAudioRef} hidden="" src={错误声音}></audio>
        {放礼花 && <div className='fangLiHua' />}
    </div>
}